<template>
  <div 
  class="cart-box"
  v-loading="loading"
  element-loading-text="正在拼命支付中"
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div @click="cancel" class="cancel">x</div>
    <table class="cart-list">
      <thead>
        <tr>
          <th></th>
          <th>名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr class="cart-item" v-for="(cart,index) in cartList" :key="index">
          <td><img :src="cart.image" alt=""></td>
          <td>{{ cart.name }}</td>
          <td>￥{{ cart.price }}</td>
          <td>
            <button @click="sub(cart.id)" class="decrement">-</button>
            <span class="count">{{ cart.number }}</span>
            <button @click="add(cart.id)" class="increment">+</button>
          </td>
          <td class="small-total">￥{{ (cart.price * cart.number).toFixed(2) }}</td>
        </tr>
      </tbody>
    </table>
    <div class="footer">
      <div>
        <span>合计：</span>
        <span class="total-count">￥{{ totalCount.toFixed(2) }}</span>
      </div>
      <div @click="clean" class="clean">清空购物车</div>
      <div @click="pay" class="pay">结算</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

  export default {
    name:'ShoppingCart',
    data(){
      return{
        cartList:[],
        loading:false,
      }
    },
    computed:{
      totalCount(){
        return this.cartList.reduce((sum,item) => sum + (item.price * item.number) , 0)
      }
    },
    methods:{
      cancel(){
        this.$bus.$emit('showCarts',false)
      },
      // 删除一个购物车商品
      async sub(cartId){
        const res = await axios.post(`/shoppingCart/sub/${cartId}`)
        // 重新渲染数量
        const data = await this.getCartList() 
        this.cartList = data.newCartList
        
        // 传递购物车数量
        this.$bus.$emit('updateCount',-1)

        // 当购物车为空时，不显示购物车展示框
        if(data.newCartList.length <= 0){
          this.$bus.$emit('showCarts',false)
        }
      },
      // 添加一个购物车商品
      async add(cartId){
        const res = await axios.post('/shoppingCart/add',{
          number:1,
          goodId:cartId
        })
        // 重新渲染购物车
        const data = await this.getCartList() 
        this.cartList = data.newCartList

        // 传递购物车数量
        this.$bus.$emit('updateCount',1)
      },
      // 清空购物车
      async clean(){
        const data = await this.getCartList()
        const res = await axios.delete('/shoppingCart/clean')
        // 重新渲染数据
        this.cartList = []
        // 给Footer组件传递count
        this.$bus.$emit('updateCount',-data.count)
        // 关闭购物车列表框
        this.$bus.$emit('showCarts',false)
      },
      pay(){
        // 展示支付框
        this.$bus.$emit('showPayBox',true)
        // 关闭当前购物车列表框
        this.$bus.$emit('showCarts',false)
        // 清空购物车
        this.clean()
        // 发送WebSocket
        var websocket = null
        var clientId = 123
        // 判断当前浏览器是否支持WebSocket
        if('WebSocket' in window){
          // 连接WebSocket节点
          websocket = new WebSocket("ws://localhost:8081/ws/" + clientId);
        } else {
          alert('Not support websocket')
        }
        // 接收到消息的回调方法
        websocket.onmessage = event => {
          // console.log('@@@',this)
          this.$bus.$emit('beginPay',event.data)
        }
      },
      // 获取购物车列表
      async getCartList(){
        const res = await axios.get('/shoppingCart/list')

        // 获取购物车数量数
        const count = res.data.data.reduce((count, item)=> count + item.number, 0)
        return { newCartList:res.data.data, count }
      }
    },
    mounted(){
      // 接收购物车列表信息
      this.$bus.$on('getCartList',cartList => this.cartList = cartList)
    }
  }
</script>

<style scoped>
  .cart-box{
    padding: 50px;
    width: 750px;
    max-height: 680px;
    background-color: #fff;
    position: absolute;
    top: 40px;
    left: 490px;
    border-radius: 10px;
    box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.5) ;
    overflow: auto;
  }
  .cart-box::-webkit-scrollbar{
    display: none;
  }
  .cart-box .cancel{
    position: fixed;
    top: 30px;
    right: 455px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background-color: #e37125;
    color: #fff;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
  }
  .cart-box img{
    width: 120px;
    height: 120px;
    border: 5px solid #afc0da;
    border-radius: 5px;
  }
  .cart-box .cart-list{
    width: 650px;
    text-align: left;
    border-collapse: collapse;
  }
  .cart-list th:nth-child(1),td:nth-child(1){
    width: 150px;
  }
  .cart-list thead tr{
    height: 30px;
    width: 650px;
    background-color: #afc0da;
  }
  .small-total{
    width: 90px;
  }
  .cart-list .cart-item{
    height: 160px;
    width: 650px;
    padding: 20px 0;
    border-bottom: 1px solid #afc0da;
  }
  .cart-list .cart-item .count{
    display: inline-block;
    margin: 0 1px;
    width: 34px;
    height: 30px;
    text-align: center;
    line-height: 25px;
    color: #686e77;
    border: 1px solid #afc0da;
    border-radius: 2px;
  }
  .cart-item .small-total{
    color: #cf4c7c;
  }
  .footer{
    display: flex;
    padding-top: 20px;
  }
  .footer .total-count{
    display: inline-block;
    margin-right: 280px;
    width: 90px;
    color: #cf4c7c;
    font-size: 20px;
  }
  .footer .clean,.pay{
    padding: 2px 4px;
    width: 104px;
    height: 36px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #e76443;
    color: #e76443;
    border-radius: 18px;
    cursor: pointer;
  }
  .footer .pay{
    margin-left: 16px;
    background-color: #e76443;
    color: #efeded;
  }
</style>